<template>
  <div class="nav-bar">
    <!-- 左侧导航项 -->
    <div class="nav-left">
      <dv-decoration-10 style="width: 100%; height: 5px" />
      <!-- 将导航项改为按钮样式 -->
      <dv-button  border="Border2" color="#4c8045" class="nav-item" @click="handleNavClick(leftNavItems[0])">
        {{ leftNavItems[0].label }}
      </dv-button>
      <dv-button border="Border4" color="#a6559d" class="nav-item" @click="handleNavClick(leftNavItems[1])">
        {{ leftNavItems[1].label }}
      </dv-button>
    </div>

    <!-- 中间标题 -->
    <div class="title">
      <dv-decoration-8 style="width: 300px; height: 50px" />
      <div class="title-text">智慧大棚系统</div>
      <dv-decoration-8 :reverse="true" style="width: 300px; height: 50px" />
    </div>

    <!-- 右侧导航项 -->
    <div class="nav-right">
      <dv-decoration-10 style="width: 100%; height: 5px" />
      <dv-button border="Border5" color="#e18a3b" class="nav-item" @click="handleUpdateDataClick">更新传感器数据</dv-button>
      <dv-button border="Border6" color="#615ea8" class="nav-item" @click="handleUpdateCamera">更新监控数据</dv-button>
      <div class="nav-item" v-for="item in rightNavItems" :key="item.name" @click="handleNavClick(item)">
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import request from "@/utils/request";
import { useRouter } from 'vue-router';



const router = useRouter();
// 左侧导航项数据
const leftNavItems = ref([
  { name: 'home', label: '首页', path: '/screen' }, // 添加跳转的 URL
  { name: 'camera', label: '监控', path: '/camera' }, // 添加跳转的 URL
]);

// 右侧导航项数据
const rightNavItems = ref([]);

// 导航点击事件
const handleNavClick = (item: { name: string; label: string; url: string }) => {
  console.log('导航项点击:', item.name);
  // 跳转到对应的 URL
  window.location.href = item.path;
};

const handleUpdateDataClick = () => {
  request.post('/Sensor/update').then(response => {
    if (response.code === 1) {
      window.location.reload(); // 刷新页面
      alert('更新数据成功');
    } else {
      alert('更新数据失败');
    }
  }).catch(error => {
    console.error(error);
  });
};

const handleUpdateCamera = () => {
  request.post('/Camera/update').then(response => {
    if (response.code === 1) {
      window.location.reload(); // 刷新页面
      alert('更新数据成功');
    } else {
      alert('更新数据失败');
    }
  }).catch(error => {
    console.error(error);
  });
};
</script>

<style scoped>
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 16px;

}

.nav-left {
  display: flex;
  align-items: center;
  gap: 50px; /* 增加间距，确保文字不拥挤 */
  flex-grow: 1; /* 让左右两侧的导航项均匀分布 */
  flex: 1;

}

.nav-right {
  display: flex;
  align-items: center;
  gap: 50px;
  flex-grow: 1; /* 让左右两侧的导航项均匀分布 */
  flex: 1;

}

.nav-left {
  justify-content: flex-start; /* 左对齐 */
}

.nav-right {
  justify-content: flex-end; /* 右对齐 */
}

.nav-item {
  cursor: pointer;
  padding: 10px 15px;
  transition: background-color 0.3s;
  white-space: nowrap; /* 防止文字换行 */
  flex: 1;
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-grow: 2; /* 让标题占据更多的空间 */
  justify-content: center; /* 标题居中 */
  margin-left: 120px;
}

.title-text {
  font-size: 24px;
  font-weight: bold;
  white-space: nowrap; /* 防止标题换行 */
}
</style>